<template>
  <div class="detail">
    <van-nav-bar title="产品介绍" 
      fixed 
      left-arrow 
      @click-left="onClickLeft" 
    />
    <van-image
      class="img"
      width="100%"
      :src="topImg"
    />
    <div class="loanDetail">
      <van-panel>
        <van-row>
          <van-col class="iconWrap" span="4">
            <van-icon :name="detail.icon ? detail.icon : 'medel-o'" size="50px" color="rgb(248, 218, 26)" />
          </van-col>
          <van-col class="text" offset="1" span="18">
            <div class="title big" v-text="detail.name"></div>
            <div v-text="'额度: ' + detail.price + '万元'"></div>
            <div v-text="'利率: ' + detail.rate + '%'"></div>
            <div v-text="'年限: ' + detail.year + '年'"></div>
            <div v-text="'用途: ' + detail.uses"></div>
            <div v-text="'面向对象: ' + detail.object"></div>
          </van-col>
        </van-row>
      </van-panel>
    </div>
    <br/>
    <div class='detailList'>
      <van-panel title="适合对象">
        <div class='item' v-text="detail.applicableObject"></div>
      </van-panel>
      <br/>
      <van-panel title="贷款用途">
        <div class='item' v-text="detail.usesDetails"></div>
      </van-panel>
      <br/>
      <van-panel title="贷款条件">
        <div class='item' v-html="detail.condition"></div>
      </van-panel>
      <br/>
      <van-panel title="贷款特色" v-if="detail.feature != ''">
        <div class='item' v-text="detail.feature"></div>
      </van-panel>
      <br/>
    </div>
    <br/>
    <br/>
    <div class="bottom">
      <van-button 
        size="large" 
        color="linear-gradient(to right, #4bb0ff, #6149f6)"
        @click="toApply"
      >
        立即申请
      </van-button>
    </div>
  </div>
</template>

<script>
  import { Image, NavBar, Panel, Row, Col, Icon, Button } from 'vant';
  import { mixins } from '../../common/mixins';
  import { mapState } from 'vuex';

  export default {
    name: 'detail',
    components: {
      [Image.name]: Image,
      [NavBar.name]: NavBar,
      [Panel.name]: Panel,
      [Row.name]: Row,
      [Col.name]: Col,
      [Icon.name]: Icon,
      [Button.name]: Button,
    },
    mixins: [mixins],
    data () {
      return {
        detailId: this.$route.query.id,
        detail: {},
        topImg: ''
      }
    },
    computed: {
      ...mapState ([
        'debugSetting' // 将 this.debugSetting 映射为 this.$store.state.debugSetting
      ])
		},
    created () {
      this.$api.info.getLoanDetail(this.detailId, (res) => {
        this.detail = res.data;
        this.topImg = this.debugSetting.resourcePath + this.detail.img;
      });
    },
    methods: {
      toApply () {
        this.$router.push(
          {
            path: '/apply', 
            query: { 
              id: this.detailId,
              name: this.detail.name
            }
          }
        );
      }
    }
  }
</script>

<style lang="scss">
  .detail {
    .img{
      margin-top: 46px;
      min-height: 53vw;
    }
    .detailList{
      .van-cell__title{
        border-left: 3px solid #1989fa;
        padding-left: 5px;
        font-size: 18px;
      }
      .item{
        padding: 10px 20px 20px;
        font-size: 14px;
        line-height: 20px;
        color: #5d5d5d;
      }
    }
    .bottom{
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 100;
    }
  }
</style>
